<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程学生</title>
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="panel">
    <div class="panel-body">
        <h1 class="page-header" id="header"></h1>
        <div id="toolbar" class="btn-group">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">
                导入Excel文件
            </button>
        </div>
        <div class="col-sm-12">
            <table id="table"></table>
        </div>
    </div>
</div>

<script src="/static/util.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script>

    $(function () {

        const data = new Data();
        data.init();

        const table = $('#table');

        const tableData = new TableData(table);
        tableData.init();

        const buttonGroup = new ButtonGroup(tableData);
        buttonGroup.init();

    });

    const Data = function () {
        const object = {};

        object.init = function () {
            sendGetAjax('/api/course/info?courseId=' + getQueryString('id'), function (res) {
                $('#header').text(res.data.courseName + "的学生");
            })
        };

        return object;
    };

    const TableData = function (table) {
        const object = {};

        object.init = function () {
            tableInit({
                table: table,
                url: '/api/course/group?courseId=' + getQueryString('id'),
                columns: object.columns,
                sidePagination: 'client',
                queryParams: object.queryParams
            });
        };

        object.columns = [{
            title: '编号',
            field: 'id'
        }, {
            title: '学号',
            field: 'studentId'
        }, {
            title: '学生名',
            field: 'studentName'
        }, {
            title: '小组名',
            field: 'groupName'
        }, {
            title: '小组id',
            field: 'groupId'
        // }, {
        //     title: '性别',
        //     field: 'gender',
        //     formatter: function (val, row, index) {
        //         return val === 'man' ? '男' : '女';
        //     }
        // }, {
        //     title: '分组',
        //     field: 'grouping'
        // }, {
        //     title: '操作',
        //     clickToSelect: false,
        //     formatter: function (val, row, index) {
        //
        //     }
        }];

        object.queryParams = function (params) {
            return {
                size: params.pageSize,
                page: params.pageNumber - 1
            };
        };

        object.refresh = function () {
            tableRefresh({table: table});
        };

        return object;
    };

    const ButtonGroup = function (data) {
        const object = {};

        object.init = function () {

        };

        return object;
    };
</script>
</body>
</html>